<template>
	<view class="page_content">
		<z-paging :show-loading-more-no-more-view="false" :safe-area-inset-bottom="true" :delay="500" bgColor="#FFF" ref="paging" v-model="msgList" @query="queryList">
			<template #top>
				<z-tabs :list="tabList" @change="onTabChanged" />
			</template>
			<template #empty>
				<view class="nodata">
					<view class="img"></view>
					<view class="text">暂无数据</view>
				</view>
			</template>
			<view class="page-content">
				<view class="flex_col" v-for="(it, idx) in msgList" :key="idx" :data-row="it" @click.stop="msgItemClicked(it)">
					<view class="flex_row_item">
						<view class="flex_row">
							<view v-if="it.isRead == 1 ? false : true" class="redDot"></view>
							<text class="title-text">{{titleStr(it)}}</text>
						</view>
						<view class="createTime_text">{{it.createTime}}</view>
					</view>
					<view class="message_text">
						{{it.content}}
					</view>
					<view v-if="showButton(it)" class="button_row">
						<button class="button_row_item" @click.stop="agreeBtnClicked(it)">同意</button>
						<button class="button_row_item" @click.stop="rejectBtnClicked(it)">拒绝</button>
					</view>
					<view v-if="it.disposeState == 1 ? true : false" class="disposeState">
						<template v-if="it.messageType == 1">
							<text>处理人：{{it.disposeUser}} | 状态：<text :class="it.disposeState == 1 ? 'color_green' : 'color_red'">{{disposeStatus(it)}}</text> | 处理时间：{{it.disposeTime}}</text>
						</template>
						<template v-else-if="it.messageType == 2">
							<text>审批人：{{it.disposeUser}} | 状态：<text :class="it.disposeResult == 1 ? 'color_green' : 'color_red'">{{disposeStatus(it)}}</text> | 处理时间：{{it.disposeTime}}</text>
						</template>
						<template v-else>
							<text>已读 | 阅读时间：{{it.disposeTime}}</text>
						</template>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:['未读消息','全部消息'],
				msgList: [
					// {
					// 	msgId:111,
					// 	content:'消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容',
					// 	createTime:"10分钟前",
					// 	disposeState:"0",//（1-已处置；0-未处置）
					// 	disposeTime:"2022-01-01 16:45",
					// 	disposeUser:"张三",
					// 	messageType:"1",//（1-设备告警提醒；2-权限申请通知；3-系统维护通知；4-系统升级完成通知；5-通用通知）
					// 	disposeType:"1",//(1-同意；2-拒绝)
					// 	isRead:'1'
					// },
					// {
					// 	msgId:111,
					// 	content:'消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容',
					// 	createTime:"10分钟前",
					// 	disposeState:"0",//（1-已处置；0-未处置）
					// 	disposeTime:"2022-01-01 16:45",
					// 	disposeUser:"张三",
					// 	messageType:"2",//（1-设备告警提醒；2-权限申请通知；3-系统维护通知；4-系统升级完成通知；5-通用通知）
					// 	disposeType:"1",//(1-同意；2-拒绝)
					// },
					// {
					// 	msgId:111,
					// 	content:'消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容',
					// 	createTime:"10分钟前",
					// 	disposeState:"1",//（1-已处置；0-未处置）
					// 	disposeTime:"2022-01-01 16:45",
					// 	disposeUser:"张三",
					// 	messageType:"2",//（1-设备告警提醒；2-权限申请通知；3-系统维护通知；4-系统升级完成通知；5-通用通知）
					// 	disposeType:"2",//(1-同意；2-拒绝)
					// }
				],
				params: {
					pageNum: 0, //分页偏移量
					pageSize: 10, // 每页数据条数
					isRead: 0, //0-未读，1-全部
				},
				tabIndex:0,
				showNodata:false
			}
		},
		onShow() {
			// this.loadData(true)
		},
		methods: {
			titleStr(item) {
				var str = '';
				if(item.messageType == '1') {
					str = '设备告警提醒';
				} else if(item.messageType == '2'){
					str = '权限申请通知';
				} else if(item.messageType == '3'){
					str = '系统维护通知';
				} else if(item.messageType == '4'){
					str = '系统升级完成通知';
				} else if(item.messageType == '5'){
					str = '通用通知';
				}
				return str;
			},
			showButton(item){
				return (item.disposeState == 0 && item.messageType == 2) ? true : false;
			},
			disposeStatus(item){
				if(item.messageType == 1) {
					return item.disposeState == 1 ? '已处理' : '未处理';
				} else {
					return (item.disposeResult == 1) ? '已同意 ' : '拒绝 ';
				}
			},
			queryList(pageNo, pageSize) {
				this.params.pageNum = pageNo;
				this.params.pageSize = pageSize;
				this.params.isRead = this.tabIndex;
				
				let self = this;
				self.$progressHud.showLoading();
				self.$NetApi.getMethod('/loyu-api/app/message/info/list', self.params).then(ok => {
					self.$progressHud.hideLoading();
					self.$refs.paging.complete(ok.rows);
				}, fail => {
					self.$refs.paging.complete(false);
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			},
			onTabChanged(index) {
				if(index != this.tabIndex) {
					this.tabIndex = index;
					this.$refs.paging.reload();
				}
			},
			agreeBtnClicked(item){
				let self = this;
				this.$progressHud.showModal({
					title:'',
					text:'确定同意吗?',
					comfirmColor:"#1677FF",
					cancelColor:"#4B5563",
					success:(res)=>{
						self.unReadAction(item.msgId);
						if(res.confirm) {
							self.agreeAction(item.msgId);
						}
					},
				})
			},
			rejectBtnClicked(item){
				let self = this;
				this.$progressHud.showModal({
					title:'',
					text:'确定拒绝吗?',
					comfirmColor:"#1677FF",
					cancelColor:"#4B5563",
					success:(res)=>{
						self.unReadAction(item.msgId);
						if(res.confirm) {
							self.rejectAction(item.msgId);
						}
					},
				})
			},
			agreeAction(msgId){
				let self = this;
				let param = {
					id:msgId,
					disposeResult:1
				}
				self.$progressHud.showLoading();
				self.$NetApi.postMethod('/loyu-api/app/message/info/dispose', param).then(ok => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast('操作成功')
					setTimeout(()=>{
						this.$refs.paging.reload();
					}, 1500);
				}, fail => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			},
			rejectAction(msgId){
				let self = this;
				let param = {
					id:msgId,
					disposeResult:2
				}
				
				self.$progressHud.showLoading();
				self.$NetApi.postMethod('/loyu-api/app/message/info/dispose', param).then(ok => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast('操作成功')
					setTimeout(()=>{
						this.$refs.paging.reload();
					}, 1500);
				}, fail => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			},
			unReadAction(msgId){
				let self = this;
				self.$progressHud.showLoading();
				self.$NetApi.postMethod('/loyu-api/app/message/info/read', {msgId:msgId}).then(ok => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast('操作成功')
					setTimeout(()=>{
						this.$refs.paging.reload();
					}, 1500);
				}, fail => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			},
			msgItemClicked(item){
				if(item.isRead == 1) {
					return;
				}
				
				var str = ""
				if(item.messageType == '1') {
					str = '设备告警提醒';
				} else if(item.messageType == '2'){
					str = '权限申请通知';
				} else if(item.messageType == '3'){
					str = '系统维护通知';
				} else if(item.messageType == '4'){
					str = '系统升级完成通知';
				} else if(item.messageType == '5'){
					str = '通用通知';
				}
				
				let self = this
				this.$progressHud.alert({
					title:str,
					text:item.content || '',
					success:(res)=>{
						self.unReadAction(item.msgId);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_content{
		width: 100%;
		height: 100%;
	}
	.page-content{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		
		margin-top: 18rpx;
		width: 100%;
		gap: 32rpx;
	}
	.flex_col{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: calc(100% - 64rpx);
		padding: 32rpx;
		gap: 16rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		
		border-radius: 24rpx;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
		box-sizing: border-box;
		border: 2rpx solid #F3F4F6;
		box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
	}
	.flex_row_item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	.flex_row{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
	.redDot{
		width: 16rpx;
		height: 16rpx;
		background-color: $power-color-error;
		border-radius: 8rpx;
		margin-right: 16rpx;
	}
	.title-text{
		font-size: 28rpx;
		font-weight: 500;
		line-height: 42rpx;
		letter-spacing: normal;
		color: #111827;
	}
	.message_text{
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #4B5563;
		word-wrap: break-word;
		word-break:break-all;
	}
	.createTime_text{
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		letter-spacing: normal;
		color: #9CA3AF;
	}
	
	.button_row{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		gap: 32rpx;
		margin-top: 16rpx;
	}
	.button_row_item{
		flex: 1;
		border-radius: 8rpx;
		background: $power-color-primary;
		color: #FFFFFF;
		height: 74rpx;
		line-height: 74rpx;
		
		font-size: 28rpx;
		font-weight: normal;
		text-align: center;
		letter-spacing: normal;
	}
	.button_row :last-child{
		background-color: $power-bkg-color;
		color: #4B5563;
	}
	.disposeState{
		// word-wrap: break-word;
		// word-break:break-all;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		letter-spacing: normal;
		color: #9CA3AF;
	}
	.color_red{
		color: $power-color-error;
	}
	.color_green{
		color: $power-color-ok;
	}
	
	.nodata {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: transparent;
		padding-bottom: 25%;
	}
	
	.nodata .img {
		width: 50vw;
		height: 41vw;
		margin-bottom: 10rpx;
		background: url(/static/mine/no_data.png) no-repeat center center;
		background-size: 100% auto;
	}
	
	.nodata .text {
		font-size: 30rpx;
		color: #999;
	}
	
</style>

